<template>
    <div class="madp-article-list-edit">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="链接地址:" prop="marketingUrl">
                <el-input v-model.trim="ruleForm.marketingUrl" placeholder="链接地址请以http或https开头" :disabled="ruleForm.changeTitle == 1" @blur="marketingUrlBlurFn"></el-input>
            </el-form-item>
            <el-form-item label="链接标题:" prop="title" class="madp-link-title">
                <el-input v-model.trim="ruleForm.title" placeholder="请输入标题，确认后不能修改"></el-input>
            </el-form-item>
            <el-form-item label="链接描述:" prop="marketingDescribe">
                <el-input class="madp-link-desc" type="textarea" rows="4" v-model.trim="ruleForm.marketingDescribe" placeholder="请输入链接描述" maxlength="100" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="封面图:" prop="marketingCover">
                <el-upload
                    v-loading="loading"
                    accept=".jpg, .jpeg, .png, .gif"
                    class="avatar-uploader"
                    action="#"
                    :show-file-list="false"
                    :auto-upload="false"
                    :headers="headers"
                    :on-change="uploadChangeFile"
                    :file-list="fileList"
                    :limit="1"
                    multiple
                >
                    <img v-if="ruleForm.marketingCover" :src="ruleForm.marketingCover" class="madp-el-image" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <p>只能上传不超过5M的文件</p>
            </el-form-item>
            <el-form-item>
                <h4>链接追踪设置</h4>
                <el-checkbox class="madp-link-track-behavior" v-model="ruleForm.trackBehavior">行为通知(当客户点击链接时，发送链接的员工会收到消息提醒)</el-checkbox>
                <!-- <p class="madp-checked-dynamic">动态通知(当客户点击链接时，会将客户的打开行为记录在客户动态里)</p> -->
            </el-form-item>
            <el-form-item class="madp-buttons">
                <el-button type="primary" size="medium" @click="dialogVisibleCancelFn">取消</el-button>
                <el-button type="primary" size="medium" @click="saveLinkForm('ruleForm', 1)">保存</el-button>
                <el-button type="primary" size="medium" @click="saveLinkForm('ruleForm', 2)">保存即发布</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { newAndEditLink, parseLink, LinkRelease, sysFileUpload } from '@/api/customer-into/marketing-material';
import store from '@/store';
import { checkFileType } from '@/util/util';
export default {
    props: {
        sendLinkList: {
            type: Object,
            required: true
        },
        activeObj: {
            type: Object,
            default: () => {
                return {
                    activeIndex: 0
                };
            }
        }
    },
    data() {
        return {
            // 请求头
            headers: {
                Authorization: 'Bearer ' + store.getters.access_token,
                LdapToken: store.getters.ldap_token
            },
            // 富文本内容
            content: '',
            // 配置项
            editorOption: {},
            // 表单
            ruleForm: {},
            // 表单校验规则
            rules: {
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                marketingUrl: [
                    {
                        required: true,
                        message: '请输入链接地址',
                        trigger: 'blur'
                    },
                    {
                        message: '请输入正常链接地址',
                        trigger: 'blur',
                        pattern: /^http[s]?:\/\/.*/
                    }
                ],
                marketingCover: [
                    {
                        required: true,
                        message: '请上传链接封面',
                        trigger: 'change'
                    }
                ]
            },
            // 弹窗图片路径
            dialogImageUrl: '',
            // 弹窗开关
            dialogVisible: false,
            // loading开关
            loading: false,
            // 文件列表
            fileList: []
        };
    },
    created() {
        this.ruleForm = this.sendLinkList;
    },
    methods: {
        // 文件上传
        uploadChangeFile(file) {
            if (file && file.raw) {
                let fileMsg = file.raw;
                if (fileMsg.size / 1024 / 1024 > 5) {
                    this.fileList = [];
                    this.$message.error('上传不能超过5M');
                    return;
                }
                let fd = new FormData();
                fd.append('file', file.raw);
                this.loading = true;
                sysFileUpload(fd)
                    .then((res) => {
                        if (res.data.code === 0) {
                            if (res.data.data.url == '') {
                                this.fileList = [];
                                this.$notify.error('上传图片格式不正确');
                            } else {
                                this.ruleForm.marketingCover = res.data.data.url;
                            }
                        }
                        this.loading = false;
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            }
        },
        //保存表单
        saveLinkForm(ruleForm, marketingState) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.newAndEditLinkFn(this.ruleForm, marketingState);
                }
            });
        },
        // 新增链接
        newAndEditLinkFn(ruleForm, marketingState) {
            let obj = {
                classification: this.activeObj.id, //分类id
                marketingUrl: ruleForm.marketingUrl, //地址
                title: ruleForm.title, //标题
                marketingDescribe: ruleForm.marketingDescribe, //描述
                marketingCover: ruleForm.marketingCover, //封面
                trackBehavior: ruleForm.trackBehavior ? 1 : 0, //文章追踪-行为通知，0为未选中，1为选中，默认未选中
                trackDynamic: 1 //文章追踪-动态通知，0为未选中，1为选中，默认未选中
            };
            if (ruleForm.changeTitle == 1) {
                obj.id = ruleForm.id;
            }
            newAndEditLink(obj, ruleForm.changeTitle == 0 ? 'post' : 'put').then((res) => {
                if (res.data.code === 0) {
                    if (marketingState !== 2) {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                    }
                    if (marketingState === 1) {
                        this.$emit('newAndEditSaveLinkFn');
                    } else {
                        if (obj.id) {
                            this.LinkReleaseFn(obj.id);
                        } else {
                            this.LinkReleaseFn(res.data.data.id);
                        }
                    }
                }
            });
        },
        //发布链接
        LinkReleaseFn(id) {
            LinkRelease(id).then((res) => {
                if (res.data.code === 0) {
                    this.$message({
                        message: '保存并发布成功',
                        type: 'success'
                    });
                    this.$emit('newAndEditSaveLinkFn');
                }
            });
        },
        //解析链接
        marketingUrlBlurFn() {
            let reg = /^http[s]?:\/\/.*/;
            if (!reg.test(this.ruleForm.marketingUrl)) {
                return;
            }
            if (!this.ruleForm.marketingUrl) {
                return;
            }
            let obj = {
                url: this.ruleForm.marketingUrl
            };
            parseLink(obj).then((res) => {
                if (res.data && res.data.code === 0 && res.data.data && res.data.data.statusCode === 200) {
                    let msg = res.data.data;
                    this.ruleForm.marketingCover = msg.imgUrl;
                    this.ruleForm.title = msg.title;
                    this.ruleForm.marketingDescribe = msg.description;
                }
            });
        },
        // 关闭弹窗
        dialogVisibleCancelFn() {
            this.$emit('handleClose');
        }
    }
};
</script>

<style lang="scss" scoped>
.avatar-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 200px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    .madp-el-image {
        object-fit: contain;
        max-width: 100%;
        max-height: 200px;
    }
}
/deep/.el-upload {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.madp-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    .el-button--medium {
        width: 120px;
    }
}
.madp-checked-dynamic {
    display: flex;
    white-space: pre-wrap;
    margin-top: 20px;
}
.madp-link-title {
    margin-top: 10px;
}
.madp-link-track-behavior {
    margin-top: 20px;
}
</style>
